const app = new Vue({
    el: "#player",
    data: {
        //歌曲搜索
        query: '',
        // 歌曲列表
        musicList: [],
        //歌曲地址
        musicURL: '',
        //歌曲封面
        musicCover: '',
        //歌曲评论
        comment: '',
        //对应歌曲的MV
        MV: '',
        // 显示状态
        isShow: false,
        // 是否播放
        isPlay: false
       
    },
    // 搜索音乐
    methods: {
        searchMusic(){
            axios.get("http://cloud-music.pl-fe.cn/search?keywords="+this.query)
            .then((response) => {
                this.musicList = response.data.result.songs;
                // console.log(this.musicList);
            },(err) => {
                console.log(err);
            })
            // 搜索完成后清空输入框的内容
            this.query = '';
        },
        //歌曲播放
        playMusic(musicId){
        //    console.log(musicId);
        // 这个接口经常网络拥挤，并不是不能播放，经过多次测试，是可以播放的
        axios.get("https://autumnfish.cn/song/url?id="+musicId)
        .then( (response) => {
            this.musicURL = response.data.data[0].url;
            // console.log(response);

        },(err) => {

        });
        //歌曲专辑封面
        axios.get("http://cloud-music.pl-fe.cn/song/detail?ids="+musicId)
        .then( (response) => {
            this.musicCover = response.data.songs[0].al.picUrl;
            // console.log();
            // console.log(response.data.songs[0].al.picUrl);
        },(err) => {

        });
        //歌曲热评
        axios.get("http://cloud-music.pl-fe.cn/comment/music?type=0&id="+musicId)
        .then( (response) => {
            this.comment = response.data.hotComments;
            // console.log(response);
            // console.log(response.data.songs[0].al.picUrl);
        },(err) => {

        });

        },
        // MV播放
        playMV(mvid){
            axios.get("http://cloud-music.pl-fe.cn/mv/url?id="+mvid)
            .then( (response) => {
                this.MV = response.data.data.url;
                console.log(response.data.data.url);
                
            },(err) => {
    
            });
            this.isShow=!this.isShow;
            if(this.isShow){
                document.querySelector(".video_con").display = "block"
            } else {
                document.querySelector(".video_con").display = "none"
            }
        },
        closeMv() {
            this.isShow = false;
          }

    }
});